<template>
  <view class="bg-[#f5f5f5] min-h-screen">
    <!-- 头部 -->
    <PageHeader title="简历投递记录" :showBack="true"/>

    <!-- 统计信息 -->
    <view class="bg-white rounded-[20rpx] mx-[30rpx] mt-[30rpx] p-[40rpx] shadow-md">
      <view class="text-center">
        <text class="text-[48rpx] font-bold text-[#333] block mb-[15rpx]">简历投递记录</text>
        <text class="text-[28rpx] text-[#666]">您已收到 {{ totalCount }} 份简历投递</text>
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="bg-white rounded-[20rpx] mx-[30rpx] mt-[30rpx] p-[30rpx] shadow-md">
      <view class="flex flex-wrap gap-[20rpx]">
        <!-- 职位筛选 -->
        <view class="flex-1 min-w-[200rpx]">
          <view
              class="w-full p-[20rpx] border-2 border-[#ddd] rounded-[12rpx] text-[26rpx] bg-white box-border cursor-pointer flex items-center justify-between"
              @click="showPositionPicker = true"
          >
            <text :class="selectedPosition ? 'text-[#333]' : 'text-[#999]'">
              {{ selectedPosition || '所有职位' }}
            </text>
            <IconFont name="arrow-down" class="text-[24rpx] text-[#999]"/>
          </view>
        </view>

        <!-- 状态筛选 -->
        <view class="flex-1 min-w-[200rpx]">
          <view
              class="w-full p-[20rpx] border-2 border-[#ddd] rounded-[12rpx] text-[26rpx] bg-white box-border cursor-pointer flex items-center justify-between"
              @click="showStatusPicker = true"
          >
            <text :class="selectedStatus ? 'text-[#333]' : 'text-[#999]'">
              {{ selectedStatus || '所有状态' }}
            </text>
            <IconFont name="arrow-down" class="text-[24rpx] text-[#999]"/>
          </view>
        </view>

        <!-- 开始日期 -->
        <view class="flex-1 min-w-[200rpx]">
          <view
              class="w-full p-[20rpx] border-2 border-[#ddd] rounded-[12rpx] text-[26rpx] bg-white box-border cursor-pointer flex items-center justify-between"
              @click="showStartDatePicker = true"
          >
            <text :class="startDate ? 'text-[#333]' : 'text-[#999]'">
              {{ startDate || '开始日期' }}
            </text>
            <IconFont name="calendar" class="text-[24rpx] text-[#999]"/>
          </view>
        </view>

        <!-- 结束日期 -->
        <view class="flex-1 min-w-[200rpx]">
          <view
              class="w-full p-[20rpx] border-2 border-[#ddd] rounded-[12rpx] text-[26rpx] bg-white box-border cursor-pointer flex items-center justify-between"
              @click="showEndDatePicker = true"
          >
            <text :class="endDate ? 'text-[#333]' : 'text-[#999]'">
              {{ endDate || '结束日期' }}
            </text>
            <IconFont name="calendar" class="text-[24rpx] text-[#999]"/>
          </view>
        </view>

        <!-- 筛选按钮 -->
        <view class="w-full">
          <nut-button
              type="primary"
              class="w-full text-[28rpx] font-bold"
              @click="handleFilter"
          >
            <IconFont name="search" class="mr-[10rpx]"/>
            筛选
          </nut-button>
        </view>
      </view>
    </view>

    <!-- 简历列表 -->
    <view class="bg-white rounded-[20rpx] mx-[30rpx] mt-[30rpx] shadow-md overflow-hidden">
      <view
          v-for="resume in resumeList"
          :key="resume.id"
          class="p-[30rpx] border-b border-[#eee] flex items-center transition-all hover:bg-[#f9f9f9]"
          @click="handleResumeClick(resume)"
      >
        <view
            class="w-[100rpx] h-[100rpx] rounded-full bg-[#e3f2fd] flex items-center justify-center mr-[30rpx] flex-shrink-0">
          <text class="text-[#1976d2] font-bold text-[36rpx]">{{ resume.name.charAt(0) }}</text>
        </view>

        <!-- 简历信息 -->
        <view class="flex-1 min-w-0">
          <text class="text-[32rpx] font-bold text-[#333] block mb-[8rpx]">{{ resume.name }}</text>
          <text class="text-[26rpx] text-[#666] block mb-[8rpx]">应聘职位：{{ resume.position }}</text>
          <text class="text-[24rpx] text-[#999]">打招呼时间：{{ resume.time }}</text>
        </view>

        <!-- 状态标签
        <view
            class="px-[20rpx] py-[10rpx] rounded-[30rpx] text-[24rpx] ml-[30rpx] flex-shrink-0"
            :class="getStatusClass(resume.status)"
        >
          {{ getStatusText(resume.status) }}
        </view>
      </view>-->

      <!-- 空状态
      <view v-if="filteredResumes.length === 0" class="p-[80rpx] text-center">
        <IconFont name="inbox" class="text-[120rpx] text-[#ddd] mb-[30rpx]"/>
        <text class="text-[28rpx] text-[#999] block">暂无简历投递记录</text>
      </view>
    </view>-->

    <!-- 分页
    <view v-if="filteredResumes.length > 0" class="flex justify-center mt-[40rpx] mb-[40rpx]">
      <view class="flex items-center gap-[10rpx]">
        <nut-button
            size="small"
            :disabled="currentPage === 1"
            @click="handlePageChange(currentPage - 1)"
        >
          上一页
        </nut-button>-->
        <!--
        <view
            v-for="page in visiblePages"
            :key="page"
            class="px-[20rpx] py-[15rpx] border border-[#ddd] rounded-[8rpx] cursor-pointer transition-all"
            :class="page === currentPage ? 'bg-[#1976d2] text-white border-[#1976d2]' : 'bg-white text-[#333]'"
            @click="handlePageChange(page)"
        >
          {{ page }}
        </view>

        <nut-button
            size="small"
            :disabled="currentPage === totalPages"
            @click="handlePageChange(currentPage + 1)"
        >
          下一页
        </nut-button>-->
      </view>
    </view>

    <!-- 职位选择器 -->
    <nut-popup v-model:visible="showPositionPicker" position="bottom" round>
      <nut-picker
          v-model="positionValue"
          :columns="positionOptions"
          title="请选择职位"
          @confirm="onPositionConfirm"
          @cancel="showPositionPicker = false"
      />
    </nut-popup>

    <!-- 状态选择器 -->
    <nut-popup v-model:visible="showStatusPicker" position="bottom" round>
      <nut-picker
          v-model="statusValue"
          :columns="statusOptions"
          title="请选择状态"
          @confirm="onStatusConfirm"
          @cancel="showStatusPicker = false"
      />
    </nut-popup>

    <!-- 开始日期选择器 -->
    <nut-popup v-model:visible="showStartDatePicker" position="bottom" round>
      <nut-date-picker
          v-model="startDateValue"
          title="请选择开始日期"
          type="date"
          @confirm="onStartDateConfirm"
          @cancel="showStartDatePicker = false"
      />
    </nut-popup>

    <!-- 结束日期选择器 -->
    <nut-popup v-model:visible="showEndDatePicker" position="bottom" round>
      <nut-date-picker
          v-model="endDateValue"
          title="请选择结束日期"
          type="date"
          @confirm="onEndDateConfirm"
          @cancel="showEndDatePicker = false"
      />
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import {ref, reactive, computed, onMounted} from 'vue'
import Taro from '@tarojs/taro'
import {IconFont} from '@nutui/icons-vue-taro'
import PageHeader from '@/components/PageHeader.vue'
import {post} from "@/utils/request";
import {number} from "unocss-preset-weapp/dist/utils";

/**
 * 我的应聘记录页面
 * @description 显示简历投递记录，支持筛选和分页
 */

// 定义接口
interface ResumeItem {
  id: string
  name: string
  position: string
  time: string
  status: 'new' | 'viewed' | 'rejected' | 'invited'
}

//定义查询格式
interface QueryParams {
  pageNo?: number;
  pageSize?: number;
  type?: number;
  status?: number
}

// 响应式数据
const totalCount = ref(12)
const currentPage = ref(1)
const pageSize = ref(10)

// 筛选条件
const selectedPosition = ref('')
const selectedStatus = ref('')
const startDate = ref('')
const endDate = ref('')

// 选择器相关
const showPositionPicker = ref(false)
const showStatusPicker = ref(false)
const showStartDatePicker = ref(false)
const showEndDatePicker = ref(false)

const positionValue = ref<string[]>([])
const statusValue = ref<string[]>([])
const startDateValue = ref('')
const endDateValue = ref('')

interface RecruitmentDailyColumn {
  member_id: null,
  create_time: null,
  time_frame: null,
  pay_number: null,
  position_name: null,
  description: null,
  type: null,
  experience: null,
  salary: null,
  number: null,
  pay_status: null,
  update_time: null,
  name: null,
  corporate_name: null,
  location: null,
  id: null,
  deadline: null,
  status: null
}

interface RecruitmentDailyitem {
  columns: RecruitmentDailyColumn;
  columnNames: string[];
  columnValues: (null | number | string)[];
}

// 选项数据
const positionOptions = ref([
  {text: '所有职位', value: ''},
  {text: 'SMT技术员', value: 'SMT技术员'},
  {text: '品质工程师', value: '品质工程师'},
  {text: '生产主管', value: '生产主管'},
  {text: '技术员', value: '技术员'},
  {text: '操作工', value: '操作工'}
])

const statusOptions = ref([
  {text: '所有状态', value: ''},
  {text: '未查看', value: 'new'},
  {text: '已查看', value: 'viewed'},
  {text: '已拒绝', value: 'rejected'},
  {text: '已邀请面试', value: 'invited'}
])

// 模拟简历数据
const resumeList = ref<ResumeItem[]>([
  {
    id: '1',
    name: '张三',
    position: 'SMT技术员',
    time: '2025-07-10 14:30',
    status: 'new'
  },
  {
    id: '2',
    name: '李四',
    position: '品质工程师',
    time: '2025-07-09 10:15',
    status: 'viewed'
  },
  {
    id: '3',
    name: '王五',
    position: 'SMT技术员',
    time: '2025-07-08 16:45',
    status: 'rejected'
  },
  {
    id: '4',
    name: '赵六',
    position: '生产主管',
    time: '2025-07-07 09:20',
    status: 'invited'
  },
  {
    id: '5',
    name: '钱七',
    position: '技术员',
    time: '2025-07-06 11:30',
    status: 'new'
  },
  {
    id: '6',
    name: '孙八',
    position: '操作工',
    time: '2025-07-05 15:45',
    status: 'viewed'
  },
  {
    id: '7',
    name: '周九',
    position: 'SMT技术员',
    time: '2025-07-04 08:20',
    status: 'rejected'
  },
  {
    id: '8',
    name: '吴十',
    position: '品质工程师',
    time: '2025-07-03 13:15',
    status: 'invited'
  }
])

// 计算属性
const filteredResumes = computed(() => {
  let filtered = [...resumeList.value]
  // 职位筛选
  if (selectedPosition.value) {
    //console.log("进入循环")
    filtered = filtered.filter(resume => resume.position === selectedPosition.value)
  }

  // 状态筛选
  if (selectedStatus.value) {
    filtered = filtered.filter(resume => resume.status === selectedStatus.value)
  }

  // 日期筛选
  if (startDate.value) {
    filtered = filtered.filter(resume => resume.time >= startDate.value)
  }

  if (endDate.value) {
    filtered = filtered.filter(resume => resume.time <= endDate.value)
  }
  console.log("filteredResumes",filteredResumes)
  return filtered
})

const totalPages = computed(() => Math.ceil(filteredResumes.value.length / pageSize.value))

const visiblePages = computed(() => {
  const pages = []
  const start = Math.max(1, currentPage.value - 2)
  const end = Math.min(totalPages.value, currentPage.value + 2)

  for (let i = start; i <= end; i++) {
    pages.push(i)
  }

  return pages
})

// 方法
//getMySignup()
//function getMySignup() {
  const submitData = {
    pageNo: 1,
    pageSize: 10
  }
  //TODO:页面需要打招呼时间，但是这里的参数没有
  post('/recruitmentDaily/mySignUp', submitData).then(res => {
    resumeList.value = res.data.map((item: RecruitmentDailyitem) => ({
      /*member_id: item.columns.member_id,
      create_time: item.columns.create_time,
      time_frame: item.columns.time_frame,
      pay_number: item.columns.pay_number,
      position_name: item.columns.position_name,
      description: item.columns.description,
      type: item.columns.type,
      experience: item.columns.experience,
      salary: item.columns.salary,
      number: item.columns.number,
      pay_status: item.columns.pay_status,
      update_time: item.columns.update_time,
      name: item.columns.name,
      corporate_name: item.columns.corporate_name,
      location: item.columns.location,
      id: item.columns.id,
      deadline: item.columns.deadline,
      status: item.columns.status,*/
      id: item.columns.id,
      name: '张三',
      position: item.columns.position_name,
      time: item.columns.update_time,
      status: item.columns.status
    }))
    console.log("resumeList的值",resumeList.value)
  })
//}

/**
 * 获取状态样式类
 */
const getStatusClass = (status: string) => {
  const statusMap = {
    new: 'bg-[#e3f2fd] text-[#1976d2]',
    viewed: 'bg-[#e8f5e9] text-[#388e3c]',
    rejected: 'bg-[#ffebee] text-[#d32f2f]',
    invited: 'bg-[#fff3e0] text-[#f57c00]'
  }
  return statusMap[status as keyof typeof statusMap] || 'bg-[#f5f5f5] text-[#666]'
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const statusMap = {
    new: '未读',
    viewed: '已回复',
    rejected: '已拒绝',
    invited: '已邀请面试'
  }
  return statusMap[status as keyof typeof statusMap] || '未知'
}

/**
 * 处理筛选
 */
const handleFilter = () => {
  currentPage.value = 1
  totalCount.value = filteredResumes.value.length

  Taro.showToast({
    title: `筛选到 ${totalCount.value} 条记录`,
    icon: 'success'
  })
}

/**
 * 处理简历点击
 */
const handleResumeClick = (resume: ResumeItem) => {
  Taro.showModal({
    title: '简历详情',
    content: `姓名：${resume.name}\n职位：${resume.position}\n状态：${getStatusText(resume.status)}\n时间：${resume.time}`,
    showCancel: false
  })
}

/**
 * 处理分页变化
 */
const handlePageChange = (page: number) => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}

/**
 * 职位确认
 */
const onPositionConfirm = (val: any) => {
  showPositionPicker.value = false
  if (val.selectedValue && val.selectedValue.length > 0) {
    selectedPosition.value = val.selectedValue[0]
  }
}

/**
 * 状态确认
 */
const onStatusConfirm = (val: any) => {
  showStatusPicker.value = false
  if (val.selectedValue && val.selectedValue.length > 0) {
    selectedStatus.value = val.selectedValue[0]
  }
}

/**
 * 开始日期确认
 */
const onStartDateConfirm = (val: any) => {
  showStartDatePicker.value = false
  startDate.value = val
}

/**
 * 结束日期确认
 */
const onEndDateConfirm = (val: any) => {
  showEndDatePicker.value = false
  endDate.value = val
}

// 生命周期
onMounted(() => {
  // 初始化数据
  totalCount.value = resumeList.value.length
})
</script>

<style lang="scss">
// 自定义样式
</style>